<template>
  <div class="flex flex-wrap gap-4">
    <el-card style="font-size: 15px;font-weight: bold;margin-bottom: 10px" shadow="always"><span style="color: #535bf2">|</span> 搜索历史
    </el-card>
  </div>
  <div class="searchHistoryList" style="padding-top: 30px">
    <el-button type="primary" @click="showAddDialog">新增信息</el-button>

    <el-table :data="searchHistoryList" style="width: auto" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" show-overflow-tooltip/>
      <el-table-column type="index" label="序号" width="150" show-overflow-tooltip/>
      <el-table-column prop="id" label="ID" width="200" show-overflow-tooltip/>
      <el-table-column prop="searchWords" label="搜索词" width="200" show-overflow-tooltip/>
      <el-table-column prop="num" label="数量" width="200" show-overflow-tooltip/>
      <el-table-column prop="searchTime" label="搜索时间" width="200" show-overflow-tooltip/>
      <el-table-column label="操作" width="230">
        <template #default="scope">
          <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
          <el-button  type="success" @click="editView(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="delSearchHistory(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="justify-content: center;margin-top: 10px" background layout="prev, pager,next" :page-size="pageSize" :total="total" @current-change="toPage" @prev-click="toPage" @next-click="toPage"/>
    <el-dialog v-model="dialogVisible" width="1000px" :title="searchHistoryQuery.id !=null ? '搜索详情' : '新增信息'"
               draggable="true" center>
      <el-form ref="detailForm" :model="searchHistoryQuery" label-width="auto"  style="max-width: 800px">
        <el-form-item  v-if="searchHistoryQuery.id !=null" label="ID:">
          <span class="detail">{{ searchHistoryQuery.id }}</span>
        </el-form-item>
        <el-form-item label="搜索词:">
          <el-input v-if="searchHistoryQuery.id==null" v-model="searchHistoryQuery.searchWords"/>

          <span class="detail" v-else>{{ searchHistoryQuery.searchWords }}</span>

        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-if="searchHistoryQuery.id==null" v-model="searchHistoryQuery.num"/>

          <span class="detail" v-else>{{ searchHistoryQuery.num }}</span>

        </el-form-item>
        <el-form-item  v-if="searchHistoryQuery.id !=null" label="时间:">
          <span class="detail">{{ searchHistoryQuery.searchTime }}</span>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="searchHistoryQuery.id==null" type="primary" @click="addSearchHistory">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="editDialogVisible" width="1000px" :title="dialogTitle" draggable="true" center>
      <el-form ref="detailForm" :model="editSearchHistoryQuery" label-width="auto" style="max-width: 800px">
        <el-form-item  label="ID:">
          <span class="detail">{{ editSearchHistoryQuery.id }}</span>
        </el-form-item>
        <el-form-item label="搜索词id:">
          <el-input v-model="editSearchHistoryQuery.searchWords"></el-input>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model="editSearchHistoryQuery.num"></el-input>
        </el-form-item>
        <el-form-item label="时间:">
          <span class="detail">{{ editSearchHistoryQuery.searchTime }}</span>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editSearchHistorySubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import { messageConfirm, messageTip } from "../util/util.js";
import qs from "qs";


export default {
  name: "SearchHistoryView",
  inject: ['reload'],
  data() {
    return {
      searchHistoryList: [],
      dialogVisible: false,
      editDialogVisible: false,
      searchHistoryQuery: { },
      pageSize: 0,
      total: 0,
      searchHistoryIdArray: [],
      dialogTitle: '',
      editSearchHistoryQuery:{}
    }
  },
  mounted() {
    this.loadSearchHistoryList(1);
  },
  methods: {
    toPage(current) {
      this.loadSearchHistoryList(current);
    },
    handleSelectionChange(searchHistoryItemArray) {
      this.searchHistoryIdArray = [];
      searchHistoryItemArray.forEach((searchHistory) => {
        this.searchHistoryIdArray.push(searchHistory.id);
      });
    },
    loadSearchHistoryList(current) {
      doGet("/admin/searchHistory", {
        current: current
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.searchHistoryList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      });
    },
    view(id) {
      doGet("/admin/searchHistory/" +id, {
        id: id
      }).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.searchHistoryQuery = resp.data.data; // 设置当前行的数据
          this.dialogVisible = true; // 显示对话框
        }
      });
    },
    delSearchHistory(id) {
      messageConfirm("是否删除该销售记录？").then(() => {
        doDelete("/admin/searchHistory/" +id , {
          id: id
        }).then((resp) => {
          if (resp.data.code === 200) {
            messageTip("删除成功!", "success");
            this.reload();
          }
        });
      });
    },
    showAddDialog() {
      this.searchHistoryQuery = { }; // 清空表单
      this.dialogVisible = true;
    },
    addSearchHistory() {
      doPost("/admin/searchHistory/save",this.searchHistoryQuery).then((resp)=>{
        if(resp.data.code===200){
          this.dialogVisible=false
          messageTip("添加成功","success")
          this.reload()
        }else {
          messageTip("添加失败","error")
        }
      })
    },
    editView(id) {
      doGet("/admin/searchHistory/" +id, {
        id: id
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.editSearchHistoryQuery= resp.data.data; // 设置当前行的数据
          this.editDialogVisible = true; // 显示对话框
        }
      });
    },
    editSearchHistorySubmit() {
      doPut("/admin/searchHistory", this.editSearchHistoryQuery).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.editDialogVisible=false
          messageTip("修改成功！","success")
          this.reload()
        }
      })
    }
  }
};
</script>
